import React from "react";
import Class from "./index.module.css";
import Card from "../card";

function Student(props) {
  const { studentData } = props;
  return (
    <Card>
      <div className={Class.box}>
        {studentData.map((item) => {
          return (
            <section className={Class.person_info} key={item.id}>
              <div className={Class.avatar}>
                <img src={item.attributes.avatar} alt="头像" />
              </div>
              <div className={Class.text_info}>
                <p style={{ display: "flow-root" }}>
                  <label htmlFor="" style={{ float: "left" }}>
                    {item.attributes.name}
                  </label>
                  <label htmlFor="" style={{ float: "right" }}>
                    {item.attributes.age}
                  </label>
                </p>
                <p>
                  <label title="花发大防空洞里水果山">
                    {item.attributes.address}
                  </label>
                </p>
              </div>
            </section>
          );
        })}
      </div>
    </Card>
  );
}

export default Student;
